<template>
	<!-- <view>qwerty</view> -->
	<div class="whl-home" @click.stop="handleShowdi">
		<div>
			<div class="whl-pos" :class="headershow ? ' xian' : ''">
				<image src="../../assets/images/tongtu-touxiang.jpg" alt=""
					@click="goPage(1, '/pages/myDetail/myDetail')" />
				<p>
					<span
						@click="goPage(1, '/pages/myDetail/myDetail')">{{ userInfo.userName?userInfo.userName:"老板" }}</span>
				</p>
				<image src="../../assets/images/publish-cion.png" alt="" @click.stop="handleShowDropdown" />
				<div class="whl-dropdown" v-show="dropDownVisible">
					<p @click="goPage(2, 'receivingPayments')">收款</p>
					<p @click="goPage(2, 'scanCode')">扫码</p>
					<p @click="goPage(1, 'accountStatement')">对账单</p>
					<span></span>
				</div>
			</div>
			<div class="headerlist">
				<div @click="goPage(2, 'receivingPayments')">
					<image src="../../assets/images/shoukuan-tb.png" alt="qqqq" />
					<p>收款</p>
				</div>
				<div @click="goPage(2, 'order')">
					<image src="../../assets/images/zhangben-tb.png" alt="" />
					<p>订单</p>
				</div>
				<div @click="goPage(2, 'scanCode')">
					<image src="../../assets/images/saoma-tb.png" alt="" />
					<p>扫码</p>
				</div>
				<div @click="goPage(2, 'message')">
					<image src="../../assets/images/xiaoxi-tb.png" alt="" />
					<p>消息</p>
				</div>
			</div>
			<div class="message" @click="gettf"></div>
		</div>
		<!-- <mt-swipe :auto="3000" class="whl-banner">
			<mt-swipe-item v-for="item in bannerList" :key="item.id">
				<img :src="item.imgUrl" alt="" class="whl-banner-img" @click="goPage(1, item.router)" />
			</mt-swipe-item>
		</mt-swipe> -->
		<swiper class="whl-banner" circular indicator-dots autoplay :interval='2000' :duration="500">
			<swiper-item v-for="item in bannerList" :key="item.id">
				<image :src="item.imgUrl" alt="" class="whl-banner-img" @click="goPage(1, item.router)" />
			</swiper-item>
		</swiper>

		<div class="whl-menus">
			<div @click="goPage(1, 'financeChild')">
				<image src="../../assets/images/tf/gongxiangfu.png" alt="" />
				<p>共享付</p>
			</div>
			<div @click="goPage(1, 'tongfuLoan')">
				<image src="../../assets/images/tf/tongfudai-tb.png" alt="" />
				<p>同福贷</p>
			</div>
			<div @click="goPage(1, 'storeManage')">
				<image src="../../assets/images/tf/mendianguanli.png" alt="" />
				<p>门店管理</p>
			</div>
			<div @click="fang()">
				<image src="../../assets/images/tf/shoukuanma.png" alt="" />
				<p>收款码</p>
			</div>
			<div @click="fang2()">
				<image src="../../assets/images/tf/jiesuanka.png" alt="" />
				<p>结算卡</p>
			</div>
			<div @click="fang3()">
				<image src="../../assets/images/tf/feilvxinxi.png" alt="" />
				<p>费率信息</p>
			</div>
			<div @click="goPage(1, 'accountStatement')">
				<image src="../../assets/images/tf/jingyingfenxi.png" alt="" />
				<p>对账单</p>
			</div>
			<div @click="goPage(1, 'subsidyPolicy', { title: '补贴政策' })">
				<image src="../../assets/images/tf/butiezhengce-tb.png" alt="" />
				<p>补贴政策</p>
			</div>
		</div>
		<div class="whl-goods">
			<div @click="goPage(1, 'tongfuLoan')">
				<h2>金融产品</h2>
				<p>更多</p>
				<image src="../../assets/images/jiantou-tb.png" alt="" />
			</div>
			<div>
				<div @click="loandetails('张家口银行')">
					<div>
						<image src="../../assets/images/zjkyinhang-tb.png" alt="" />
						<p>张家口银行</p>
					</div>
					<p>贷款额度10~30万</p>
					<p>
						<span>贷款利息不高于</span>
						<span>6.5%</span>
					</p>
					<p class="whl-tag whl-banka-tag">贷款</p>
				</div>
				<div @click="loandetails('河北银行')">
					<div>
						<image src="../../assets/images/hebei-tb.png" alt="" />
						<p>河北银行</p>
					</div>
					<p>贷款额度10~30万</p>
					<p>
						<span>贷款利息不高于</span>
						<span>6%</span>
					</p>
					<p class="whl-tag whl-banka-tag">贷款</p>
				</div>
				<div @click="loandetails('平安银行')">
					<div>
						<image src="../../assets/images/pingan-tb.png" alt="" />
						<p>平安银行</p>
					</div>
					<p>贷款额度10~30万</p>
					<p>
						<span>放款时长</span>
						<span>一个工作日</span>
					</p>
					<p class="whl-tag whl-banka-tag">贷款</p>
				</div>
				<div @click="goPage(3)">
					<div>
						<image src="../../assets/images/snblog.png" alt="" />
						<p>苏宁银行</p>
					</div>
					<p>贷款额度10~30万</p>
					<p>
						<span>放款时长</span>
						<span>一个工作日</span>
					</p>
					<p class="whl-tag whl-banka-tag">贷款</p>
				</div>
			</div>
		</div>
		<!-- 	<StoreChoice ref="StoreChoice" :current="store" :multipleChoice="false" :hasTotal="false"
			v-on:listenToStoreSelect="getSelectStoreValue" /> -->
	</div>
</template>
<script>
	// import jsBridge from "../../tools/jsBridge";
	import {
		bannerList
	} from "@/js/banner.js";
	import localStorageClient from "../../js/localstorage";
	// import StoreChoice from "../../components/StoreChoice/StoreChoice";
	export default {
		// components: {
		// 	StoreChoice,
		// },
		data() {
			return {
				popupVisible: true,
				dropDownVisible: false,
				scanClick: false,
				userInfo: {},
				bannerList,
				headershow: false,
				producttype: "",
				getSelectStoreValue: null,
				store: [],
			};
		},
		mounted() {
			console.log('aaaaaaaaaaaaaaa');
			this.userInfo = localStorageClient.getJSON("user") ?
				localStorageClient.getJSON("user") : {};
			// uni.$on('scroll', this.headerscroll);
		},
		onPageScroll() {
			this.headerscroll()
		},
		// beforeDestroy() {
		// 	// 移除 uni-app 的页面滚动事件监听
		// 	uni.$off('scroll', this.headerscroll);
		// },
		methods: {
			gettf() {
				// this.$router.push({
				// 	path: "/tfassistant"
				// });
				uni.navigateTo({
					url: '/pages/tfassistant/tfassistant'
				});
			},
			LoandetailsshopId(value, storeName) {
				console.log(
					value,
					"listData[Object.keys(listData)[0]][0]listData[Object.keys(listData)[0]][0]"
				);
				let shopId = value[0].selectKey;
				this.$router.push({
					path: "/lendingbank",
					query: {
						title: this.producttype,
						gxfShopId: shopId,
						shopName: storeName,
					},
				});

			},
			LoandetailsshopId1(value, storeName) {
				let shopId = value[0].selectKey;
				this.$router.push({
					path: "/storeManage/getMoneyQrCode",
					query: {
						title: "收款二维码",
						gxfShopId: shopId,
						shopName: storeName
					},
				});
			},
			async fang() {
				let Obj = await this.tabone();
				console.log(Obj, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
				if (typeof Obj == "boolean") {
					this.getSelectStoreValue = this.LoandetailsshopId1;
					this.$refs.StoreChoice.popupShow();
				} else {
					this.$router.push({
						path: "/storeManage/getMoneyQrCode",
						query: {
							title: "收款二维码",
							gxfShopId: Obj.selectKey,
							shopName: Obj.shopName,
						},
					});
				}
			},
			LoandetailsshopId2(value, storeName) {
				let shopId = value[0].selectKey;
				this.$router.push({
					path: "/storeManage/gatheringManage",
					query: {
						title: "结算卡",
						gxfShopId: shopId,
						shopName: storeName
					},
				});
			},
			async fang2() {
				let Obj = await this.tabone();
				console.log(Obj, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
				if (typeof Obj == "boolean") {
					this.getSelectStoreValue = this.LoandetailsshopId2;
					this.$refs.StoreChoice.popupShow();
				} else {
					this.$router.push({
						path: "/storeManage/gatheringManage",
						query: {
							title: "结算卡",
							gxfShopId: Obj.selectKey,
							shopName: Obj.shopName,
						},
					});
				}
			},
			LoandetailsshopId3(value, storeName) {
				let shopId = value[0].selectKey;
				this.$router.push({
					path: "/storeManage/gatheringManage",
					query: {
						title: "费率信息",
						gxfShopId: shopId,
						shopName: storeName
					},
				});
			},
			async fang3() {
				let Obj = await this.tabone();
				console.log(Obj, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
				if (typeof Obj == "boolean") {
					this.getSelectStoreValue = this.LoandetailsshopId3;
					this.$refs.StoreChoice.popupShow();
				} else {
					this.$router.push({
						path: "/storeManage/gatheringManage",
						query: {
							title: "费率信息",
							gxfShopId: Obj.selectKey,
							shopName: Obj.shopName,
						},
					});
				}
			},
			async loandetails(item) {
				if (item == "苏宁银行") {
					Toast("近期上线，敬请期待...");
				} else {
					this.producttype = item;
					let Obj = await this.tabone();
					console.log(Obj, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
					if (typeof Obj == "boolean") {
						this.getSelectStoreValue = this.LoandetailsshopId;
						this.$refs.StoreChoice.popupShow();
					} else {
						this.$router.push({
							path: "/lendingbank",
							query: {
								title: this.producttype,
								gxfShopId: Obj.selectKey,
								shopName: Obj.shopName,
							},
						});
					}

					// let Obj = await this.tabone()
					// if (typeof Obj == "boolean") {
					// 	this.$refs.StoreChoice.popupShow();
					// } else {
					// 	this.getSelectStoreValue([Obj], Obj.storeName)
					// }
				}
			},

			handleShowdi() {
				if (this.dropDownVisible) {
					this.dropDownVisible = false;
				}
			},
			headerscroll() {
				let that = this
				uni.createSelectorQuery().in(this).select('.headerlist').boundingClientRect((rect) => {
					// console.log(a);
					if (rect.top < 95) {
						that.headershow = true;
					} else {
						that.headershow = false;
					}
				}).exec();


			},
			async getBanner() {
				const res = await this.ajax({
					url: "",
					type: "get",
					controlLoading: false,
				});
				if (res.success) {
					const data = res.resultObject;
				}
			},
			handleShowDropdown() {
				this.dropDownVisible = !this.dropDownVisible;
			},
			goPage(type, path = "", query = {}) {
				if (type === 1) {
					uni.navigateTo({
						url: path,
						query: query
					});
					this.dropDownVisible = false;
				} else if (type === 2) {
					jsBridge.goNativePage({
						pageName: path
					});
					this.dropDownVisible = false;
				} else {
					Toast("近期上线，敬请期待...");
				}
			},
			handleScan() {
				if (this.scanClick) return;
				this.scanClick = true;
				setTimeout(() => (this.scanClick = false), 2000);
				try {
					AppUtil.call(AppUtil.APIS.SCAN, {}, (response) => {
						if (
							response &&
							(response.success === true || response.success === "true")
						) {
							const url = response.resultObject;
							// this.scanRequest(url);
						} else if (response && response.code && response.code == "-10") {
							//未扫码，返回，不处理
						} else {
							Toast("扫码失败");
						}
					});
				} catch (err) {}
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "../../style/_public";

	.whl-home {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: url("../../assets/images/head-bg.png") left top / cover no-repeat;
		background-size: 100vw;

		&>div:first-child {
			width: 100%;
			height: pw(295);
			position: relative;

			.whl-pos {
				position: fixed;
				background: #cc080c00;
				z-index: 99;

			}

			&>div:first-child {
				width: 100vw;
				height: pw(82);
				// padding: 0 pw(15);
				@extend %box-sizing;
				display: flex;
				align-items: center;
				// padding-top: pw(40);
				padding: pw(30) pw(15) pw(10) pw(15);

				&>image:first-child {
					width: pw(42);
					height: pw(42);
					border-radius: 50%;
				}

				&>p {
					width: auto;
					height: 100%;
					display: flex;
					align-items: center;
					font-family: "PingFang SC", serif;
					font-size: pw(16);
					color: #fff;
					font-weight: 500;
					margin-left: pw(10);
					flex: 1;
				}

				&>image:nth-child(3) {
					width: pw(24);
					height: pw(24);
				}

				.whl-dropdown {
					width: pw(90);
					height: auto;
					border-radius: pw(4);
					background: #fff;
					box-shadow: 0 pw(5) pw(15) 0 rgba(0, 0, 0, 0.1);
					position: absolute;
					right: pw(15);
					top: pw(85);
					z-index: 100;

					&>p {
						width: 100%;
						height: pw(43);
						border-bottom: 1px solid #eee;
						color: #333;
						font-size: pw(14);
						display: flex;
						justify-content: center;
						align-items: center;
					}

					&>span {
						display: block;
						width: pw(16);
						height: pw(16);
						transform: rotate(45deg) skew(20deg, 20deg);
						position: absolute;
						right: pw(5);
						top: pw(-8);
						background-color: #fff;
					}
				}
			}

			&>div:nth-child(2) {
				width: 100%;
				height: pw(65);
				display: grid;
				grid-template-rows: repeat(1, 1fr);
				grid-template-columns: repeat(4, 1fr);
				// margin-top: pw(25);
				padding: 0 pw(15);
				@extend %box-sizing;
				position: absolute;
				left: 0;
				bottom: pw(132);

				&>div {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;

					&>image {
						width: pw(40);
						height: pw(40);
					}

					&>p {
						color: #fff;
						text-align: center;
						font-family: PingFang SC, serif;
						font-size: pw(14);
						font-style: normal;
						font-weight: 500;
						line-height: pw(18);
					}
				}
			}
		}

		.whl-banner {
			width: pw(355);
			height: pw(90);
			margin: 0 auto;
			margin-top: pw(6);
			border-radius: pw(10);

			.whl-banner-img {
				width: pw(355);
				height: pw(90);
				border-radius: pw(10);
			}

			.is-active {
				background-color: #fff !important;
			}

			.mint-swipe-indicator {
				background: #fff !important;
			}
		}

		.whl-menus {
			width: 100%;
			height: auto;
			// overflow: hidden;
			display: grid;
			grid-template-rows: repeat(2, 1fr);
			grid-template-columns: repeat(5, 1fr);
			margin-top: pw(15);

			&>div {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				height: pw(70);

				&>image {
					width: pw(40);
					height: pw(40);
				}

				&>p {
					color: #333;
					text-align: center;
					font-family: PingFang SC, serif;
					font-size: pw(12);
					font-style: normal;
					line-height: pw(16);
				}
			}
		}

		.whl-goods {
			width: pw(355);
			height: auto;
			// overflow: hidden;
			margin: 0 auto;
			background: #fff;
			border-radius: pw(10);
			padding-bottom: pw(10);
			margin-top: pw(10);

			&>div:first-child {
				width: 100%;
				height: pw(50);
				display: flex;
				align-items: center;
				padding: 0 pw(10);
				@extend %box-sizing;

				&>h2:first-child {
					display: flex;
					color: #000;
					font-family: PingFang SC;
					align-items: center;
					font-family: PingFang SC;
					font-size: pw(18);
					font-weight: 500;
					text-align: left;
				}

				&>p:nth-child(2) {
					width: auto;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					flex: 1;
					color: #666;
					font-size: pw(12);
					font-style: normal;
				}

				&>image:nth-child(3) {
					width: pw(12);
					height: pw(12);
				}
			}

			&>div:nth-child(2) {
				width: 100%;
				height: auto;
				// overflow: hidden;
				display: grid;
				grid-template-rows: repeat(2, 1fr);
				grid-template-columns: repeat(2, 1fr);
				grid-gap: pw(10);
				padding: 0 pw(10);
				@extend %box-sizing;

				&>div {
					width: 100%;
					height: 100%;
					background-color: #fff6f6;
					border-radius: pw(4);
					padding: pw(10);
					padding-top: 0;
					@extend %box-sizing;
					position: relative;

					&>div:first-child {
						width: 100%;
						height: pw(40);
						display: flex;
						align-items: center;

						&>image {
							width: pw(24);
							height: pw(24);
							border-radius: 50%;
						}

						&>p {
							width: auto;
							height: 100%;
							display: flex;
							align-items: center;
							flex: 1;
							color: #333;
							font-size: pw(14);
							margin-left: pw(5);
						}
					}

					&>p:nth-child(2) {
						width: 100%;
						height: pw(19);
						display: flex;
						align-items: center;
						color: #000;
						font-size: pw(12);
					}

					&>p:nth-child(3) {
						width: 100%;
						height: pw(19);
						display: flex;
						align-items: center;
						color: #000;
						font-size: pw(12);

						&>span:nth-child(2) {
							color: #f20000;
						}
					}

					.whl-tag {
						width: pw(28);
						height: pw(14);
						border-radius: 0 pw(4);
						background: linear-gradient(280deg, #f00 0%, #ff7a00 100%);
						color: #fff;
						font-size: pw(10);
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: 0;
						right: 0;
						padding: 0;
					}

					.whl-banka-tag {
						background: linear-gradient(280deg, #005eec 0%, #1ea0ff 100%);
					}
				}
			}
		}

		.whl-gap {
			width: 100%;
			height: pw(60);
		}
	}

	.message {
		width: pw(120);
		height: pw(36);
		position: absolute;
		left: 0;
		right: 0;
		bottom: pw(2);
		margin: auto;
		border-radius: pw(17);
		background-image: url('../../assets/images/liaojie.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}

	.xian {
		background: #cc080c !important;
	}

	.mint-swipe-indicator {
		width: pw(6);
		height: pw(3);
		opacity: 0.6;
		border-radius: pw(3);
		margin-left: pw(4);
		bottom: pw(4);
	}

	.is-active {
		width: pw(16);
	}

	::v-deep .uni-swiper-dot-active {
		background-color: rgba(255, 255, 255, 1) !important;
	}

	::v-deep .uni-swiper-dot {
		width: pw(23);
		height: pw(3);
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 0%;
	}
</style>